// 下拉框 数据
// 获取分类列表数据 ==> 填充到分类的下拉框中
let form = layui.form
axios.get('/my/article/cates').then((res) => {
    console.log(res)

    let newArr = res.data.data.map((item) => {
        // 下拉框选择的结果是有 option value 决定
        // 还需要把option的value设置好值  value设置成对应的Id的值
        return `<option value="${item.Id}">${item.name}</option>`
    })
    // console.log(newArr.join(""));

    // 把option内容放到下拉框中  html() 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加（不会有覆盖问题）
    $('[name="cate_id"]').append(newArr.join(''))

    form.render('select') //刷新select选择框渲染
})

// ======================= 富文本编辑器 =======================
const E = window.wangEditor
const editor = new E('#contentBox')
editor.config.zIndex = 1
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()

// ============================= 图片裁切 =============================
let $image = $('.container img')
const layer = layui.layer

$image.cropper({
    // 纵横比
    aspectRatio: 400 / 280,
    // 指定预览区域 (把预览的图片放到哪去)
    preview: '.preview',
})

// 选择文件的按钮点击功能 ==> 模拟点击 文件选择器
$('#btnChooseCoverImage').click(function () {
    $('#fileCover').click()
})

// =============================  给文件域注册change事件 =============================
$('#fileCover').on('change', function () {
    let file = this.files[0]
    // console.log(file);

    // 细节优化：如果没有选择，后续代码不执行并提示用户
    if (!file) {
        return layer.msg('请选择文件')
    }

    let newImgSrc = URL.createObjectURL(file)
    // console.log(newImgSrc);

    $image
        .cropper('destroy')
        .attr('src', newImgSrc)
        .cropper({
            // 纵横比
            aspectRatio: 400 / 280,
            // 指定预览区域 (把预览的图片放到哪去)
            preview: '.preview',
        })
})

// =============== 决定文章的状态是已发布，还是草稿 ===============
// 变量state 来存储文章的状态（已发布、草稿）
let state

$('#btnPublish').on('click', function () {
    state = '已发布'
})

$('#btnSave').on('click', function () {
    state = '草稿'
})

// =============== 获取表单数据，ajax提交数据 ===============
$('#form').on('submit', function (e) {
    e.preventDefault()

    // 收集数据 ==> 接口要求的是 FormData格式数据
    const fd = new FormData(this)
    // console.log(fd)

    // 收集到了富文本编辑器内容
    // 对于FormData收集不到的数据， 可以使用append方法进行追加
    // 语法： fd.append(name, value);   name 写啥 ，看接口文档
    fd.append('content', editor.txt.html())

    // 追加文章状态
    fd.append('state', state)

    // 处理封面数据
    $image
        .cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 400,
            height: 280,
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            // 使用fd的append方法来追加blob数据
            fd.append('cover_img', blob)

            // 在这发送ajax请求 ==> 才把数据完整的收集到了（带给服务器完整数据）
            axios.post('/my/article/add', fd).then((res) => {
                console.log(res)

                if (res.data.status !== 0) {
                    // 发布失败
                    return layer.msg('发布失败')
                }

                layer.msg(
                    '发布成功',
                    {
                        time: 1500, //2秒关闭（如果不配置，默认是3秒）
                    },
                    function () {
                        // 关闭后想做些什么
                        // 跳转页面
                        location.href = '/article/art_list.html'
                    }
                )
            })
        })
})


// 同步 异步
// console.log(1)

// setTimeout(() => {
//     console.log(2)
// }, 0)

// console.log(3)
// // 1 3 2
